<template>
  <div>
    <div style="background-color: #f1f1f1;width: 100%;padding: 13px 0px 10px 0px">
      <div class="titleBox" v-loading="loading">
        <div class="left" style="line-height: 0rem"><span class="now bread" >当前位置: </span></div>
        <div class="left">
          <el-breadcrumb separator-class="el-icon-arrow-right" >
            <el-breadcrumb-item :to="{ path: '/' }"><span class="bread" >首页: </span> </el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/newsList' }"><span class="bread" >新闻列表 </span></el-breadcrumb-item>
            <el-breadcrumb-item><span class="bread" style="color: #0062a2">新闻详情</span></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div class="cleae"></div>
    </div>
    <div class="cent">
      <div class="listBox clearfix">
          <div class="title">
            <p class="titleText">{{fromData.title}}</p>
            <p class="time">{{fromData.createTime}}</p>
          </div>
        <div class="ditleCent ql-editor" :DetailData="DetailData">
          <div class=" ql-container" v-html="fromData.content">

          </div>
          <div class="next">
            <p>
              <span class="el-icon-arrow-left" @click="next(-1)" v-show="fromData.hasLast">上一篇</span>
              <span @click="goBack()">{{name=='index'?'返回首页':'新闻列表'}}</span>
              <span @click="next(1)"  style="text-align: right" v-show="fromData.hasNext"> 下一篇  <i class="el-icon-arrow-right"></i></span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .titleBox{width:70%;padding:40px 0px 0px 0px;min-width:1000px;max-width: 1200px;margin:auto;text-align: left;height: 30px}
  .titleBox .title{ margin-top:20px;}
  .titleText{font-size: 24px; text-align: center;line-height: 50px;color: #000;font-weight: bold}
  .time{font-size: 12px; text-align: center;line-height: 20px;color: #909090}
  .now{font-size: 14px; font-weight: bold;display: block; width: 80px;height: 14px;line-height: 14px}
  .cent{width:70%;background-color:#fff;padding:20px;min-width:1000px;max-width: 1200px;margin:auto}
  .ditleCent{padding-top: .4rem;min-height: 5rem;max-width: 830px;margin: auto}
  .ditleCent p{font-size: 12px; line-height: 25px; color: #909090;text-align: left;text-indent: 50px;}
  .titleBox  .bread{font-size:.16rem;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;font-weight: normal}
  .nave{width: 100%;line-height: 30px;}
  .bot{ background-color: #fff ; color: #000 ;padding-left: 20px;padding-right: 20px;}
  .bot:hover{ background-color: #0061a1 ; color: #f1f1f1 }
  .nave p {text-align:left}
  .nave .check{background: #f1f1f1;color:#0061a1;}
  .nave  span:hover{background: #f1f1f1;color:#0061a1;font-size:14px;}
  .nave  span{text-align: center; color:#f1f1f1; line-height:60px; padding:5px 20px;}
  .ditleCent  .next p{text-indent: 0px;text-align: center}
  .next{margin-top: 100px}
  .ditleCent  .next p span{margin: 0px 48px;color: #93bede;font-size: 14px;cursor: pointer}
</style>
<script>
  import setPublc from '@/components/public/set.vue'
  import HeaderPublc from '@/components/public/herderIndex.vue'
  import Public from '@/vuex/public'
  import {mapState, mapActions} from 'vuex'
  export default {
    name: 'my-adminChart',
    created () {
      this.fromData={
        id:'',
        type:'',
        title: '',
        content:'',
        createTime:'',
        creatorId: "",
        hasLast:'',
        hasNext:''
      }
      // 查看本页面路由 绑定对应页面class
      var name = this.$route.query.id
      this.name = name
      //新增 业务
        this.fromData.id = parseInt(this.$route.query.chartID);
        if(this.fromData.id){
          var parm = {id: this.fromData.id}
          this.showNewsDetails(parm)
        }
    },
    data () {
      return {
        id:'',
        fromData:{
          id:'',
          type: '',
          title: '',
          content:'',
          createTime:'',
          hasLast:'',
          hasNext:''
        },
        loading:false
      }
    },
    methods: {
      ...mapActions({
        showNewsDetails: 'showNewsDetails',
      }),
      goBack(){
        this.$router.back(-1)
      },
      next(a){
        var parm = {
           id:this.fromData.id,
           page:a
        }
        window.scrollTo(0,0);
        this.loading = true;
       this.showNewsDetails(parm)
      },
      login () {
        this.$router.push({ name: 'map' })
      },
      //详情解析
      dataFn(res){
        res = res.body.data
        var time = Public.publicLo.timeCheng()
          if(res.createTime){
            time = Public.publicLo.timeCheng(res.createTime)
          }
          this.fromData={
            id:res.id,
            type: res.type,
            title: res.title,
            content:res.content,
            createTime:time.times,
            creatorId:res.creatorId,
            hasLast:res.hasLast,
            hasNext:res.hasNext
         }
      }
    },
    computed: {
      DetailData() {
        var parm = this.Detail
        this.loading = false
        if (parm) {
          this.dataFn(parm)
        }
        return 1
      },
      ...mapState([
        'Detail',
        'updateStatus',
        'language',
        'show'
      ])
    },
    mounted () {
      // var width = document.body.clientWidth;
      // var dom = document.getElementById('main');
      // var w = width-240;
      // dom.style = 'max-width:'+ w +'px';
      window.scrollTo(0,0);
    },
    components: {
      HeaderPublc: HeaderPublc,
      setPublc:setPublc,
    }
  }
</script>

